<template>
  <view class="container">
    <view class="tab-layout hor-layout-center">
      <view @click="tabClick(0)" class="tab-item ver-layout-center" :class="{'select':selTab==0}">
        <view class="tab-item-text">访客天气记录</view>
        <view class="bottom-line" :class="{'select':selTab==0}"></view>
      </view>
      <view @click="tabClick(1)" class="tab-item ver-layout-center" :class="{'select':selTab==1}">
        <view class="tab-item-text">访客历史记录</view>
        <view class="bottom-line" :class="{'select':selTab==1}"></view>
      </view>
    </view>
    <view v-show="selTab==1" class="content-layout ver-layout">
      <block v-for="(item, index) in visitList" :key="index">
        <view class="list-item hor-layout">
          <view class="user-icon"></view>
          <view class="ver-layout" style="margin-left: 12px;flex: 1;">
            <view class="hor-layout-side">
              <view>{{ item.paltForm }}</view>
              <view class="time-view">{{ item.visitTimes[item.visitTimes.length - 1] }}</view>
            </view>
            <view class="hor-layout-center" style="margin-top: 6px;">
              <view style="color: #d1e0e7;margin-right: 10px;">{{ index + 1 }}</view>
              <view v-if="item.address" class="user-address">{{ item.address.ad_info.city }}</view>
              <view style="color: #89b1c1;">{{ getUserFlag(item) }}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view v-show="selTab==0" class="content-layout ver-layout">
      <block v-for="(item, index) in weatherList" :key="index">
        <view class="list-item hor-layout">
          <view class="user-icon"></view>
          <view class="ver-layout" style="flex:1;margin-left: 10px">
            <view class="hor-layout-side-center" style="flex: 1;font-size: 14px">
              <view class="user-address">
                {{ item.city }}
              </view>
              <view class="time-view">{{ item.date }}</view>
            </view>
            <view style="margin-left: 5px;margin-top: 5px">
              {{ item.weather.info }}
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selTab: 0,
      weatherList: [],
      visitList: []
    }
  },
  onLoad() {
    this.loadWeatherData()
  },
  onReachBottom() {
    if (this.selTab == 1) this.loadVisitData()
    if (this.selTab == 0) this.loadWeatherData()
  },
  methods: {
    tabClick(index) {
      this.selTab = index
      if (this.selTab == 1 && !this.visitList.length) this.loadVisitData()
    },
    getUserFlag(item) {
      if (item.loginUserInfo && item.loginUserInfo.mobile)
        return item.loginUserInfo.mobile
      if (item.loginUserInfo && item.loginUserInfo.email)
        return item.loginUserInfo.email
      if (item.mxWxUserInfo && item.mxWxUserInfo.nickName)
        return item.mxWxUserInfo.nickName
      if (item.mxTtUserInfo && item.mxTtUserInfo.nickName)
        return item.mxTtUserInfo.nickName
    },
    loadWeatherData() {
      uni.showLoading({title: "加载中...", mask: true,})
      uniCloud.database().collection("weather").orderBy("date", "desc").skip(this.weatherList.length).limit(10).get().then(res => {
        console.log(res)
        this.weatherList = this.weatherList.concat(res.result.data)
      }).finally(res => {
        uni.hideLoading()
      })
    },
    loadVisitData() {
      uni.showLoading({title: "加载中...", mask: true,})
      uniCloud.database().collection("visitor").orderBy("visitTimes", "desc").skip(this.visitList.length).limit(10).get().then(res => {
        console.log(res)
        this.visitList = this.visitList.concat(res.result.data)
      }).finally(res => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style>
page {
  background: #e5e5e5;
}

.loading-view {
  text-align: center;
  margin-top: 10px;
}

.list {
}

.list-item {
  font-size: small;
  padding: 10px;
  margin: 7px 15px;
  background: white;
  border-radius: 7px;
  box-shadow: 0 0 5px #c6b6a2;
}

.user-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: 100% 100%;
  background-image: url('https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/e6081c4c-e750-4394-8d88-6477d5d6b615.jpg');
}

.user-address {
  margin: 0px 3px;
  color: white;
  background: #77b8ff;
  padding: 0px 2px;
  border-radius: 2px;
  font-size: x-small;
  height: fit-content;
}

.time-view {
  font-size: small;
  color: #9e9e9e;
}

.tab-layout {
  width: 100%;
  height: 46px;
  position: fixed;
  background: #555664;
}

.tab-item {
  flex: 1;
  color: lightgray;
  font-size: 14px;
  text-align: center;
}

.tab-item.select {
  color: white;
  font-size: 15px;
}

.tab-item-text {
  flex: 1;
  flex-shrink: 0;
  height: 43px;
  line-height: 43px;
}

.bottom-line {
  width: 80px;
  height: 3px;
  border-radius: 3px;
  background: #555664;
}

.bottom-line.select {
  width: 80px;
  height: 3px;
  border-radius: 3px;
  background: #ce1212;
}

.content-layout {
  padding-top: 50px;
}
</style>
